<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    ul{
        position: relative;
    }
    li{
        position: absolute;
        /*vertical-align: bottom;*/
        transform: translateY(-100%);
    }
    li.first{
        background-color: black;
        line-height: 300px;
    }
    li.second{
        background-color: red;
        line-height: 1000px;
    }
    li.third{
        background-color: yellow;
        line-height: 50px;
    }
    li.forth{
        background-color: green;
        line-height: 950px;
    }
</style>
<ul >
    <li class="first">1</li>
    <li class="second">2</li>
    <li class="third">3</li>
    <li class="forth">4</li>
</ul>
</body>
</html>